<template>
    <div>
        <VueDragResize :isActiyve="true" :w="295" :h="700" v-on:resizing="resize" v-on:dragging="resize"
            :isResizable="false" :parentLimitation="false" :parentW="w" :parentH="h" :x="280" :y="47"
            :preventActiveBehavior="false" style="background-color: rgba(255, 255, 255, 0.8)">
            <el-form ref="sliceFrom" :model="dataInfo" label-width="82px">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="扫描信息" name="scanInfo">
                        <el-row>
                            <el-form-item class="el-form-item" label="病理编号" prop="pathologyId">
                                <el-input v-model="dataInfo.pathologyId" placeholder="请输入病理编号" class="input-form"
                                    size="mini">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="切片名">
                                <el-input v-model="dataInfo.originFilename" placeholder="请输入切片名" class="input-form"
                                    size="mini">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="扫描员" prop="createName">
                                <el-input v-model="dataInfo.createName" placeholder="请输入扫描员" class="input-form" size="mini">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="扫描编号">
                                <el-input v-model="dataInfo.scannerSerialNumber" placeholder="请输入扫描编号" class="input-form"
                                    size="mini">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="扫描批次">
                                <el-input v-model="dataInfo.biopsyHistoryId" placeholder="请输入扫描批次" class="input-form"
                                    size="mini">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="扫描机器号">
                                <el-input v-model="dataInfo.scannerBrandModel" placeholder="请输入扫描机器号" class="input-form"
                                    size="mini">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="扫描倍率">
                                <el-select v-model="dataInfo.level" class="picker-form" size="mini">
                                    <el-option v-for="t in levelList" :key="t.id" :label="t.name" :value="t.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="上传模式">
                                <el-select v-model="dataInfo.isAddedBiopsy" class="picker-form" size="mini">
                                    <el-option v-for="t in isAddedBiopsyList" :key="t.id" :label="t.name" :value="t.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="上传日期">
                                <el-date-picker v-model="dataInfo.createTime" type="datetime" size="mini"
                                    class="input-class" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="所属医院">
                                <el-select v-model="dataInfo.sliceHospital" class="picker-form" size="mini"
                                    @change="getBranchList">
                                    <el-option v-for="t in hospitalList" :key="t.id" :label="t.name" :value="t.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="分院名称">
                                <el-select v-model="dataInfo.branchName" placeholder="请选择分院" clearable class="picker-form"
                                    size="mini">
                                    <el-option v-for="item in branchCourtsList" :key="item.name" :label="item.name"
                                        :value="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="切片大小">
                                <el-input v-model="dataInfo.fileSize" placeholder="请输入切片大小" class="input-form" size="mini">
                                    <template slot="append">MB</template>
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row style="text-align: center; margin-top: 5px">
                            <el-button type="primary" size="mini" @click="submitSliceDiagnosis"
                                v-show="!!pathologyIdStatus && currentLevelLabel != '完成'">提交
                            </el-button>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="切片评定" name="sliceAssess">
                        <el-row>
                            <el-form-item class="el-form-item" label="切片质量:">
                                <el-select v-model="dataInfo.biopsyQuality" class="picker-form" size="mini">
                                    <el-option v-for="t in sliceQualityList" :key="t.id" :label="t.name" :value="t.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="清晰度:">
                                <el-select v-model="dataInfo.scanDefinition" class="picker-form" size="mini">
                                    <el-option v-for="t in scanQualityList" :key="t.id" :label="t.name" :value="t.name">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="评定人">
                                <el-select placeholder="请选择评定人" clearable v-model="dataInfo.sliceQualityUserId"
                                    class="input-form" size="mini">
                                    <el-option v-for="item in scanNameList" :key="item.scanId" :label="item.scanName"
                                        :value="item.scanId" />
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="评定日期">
                                <el-date-picker v-model="dataInfo.sliceQualityTime" type="datetime" size="mini"
                                    class="input-class" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择评定日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row style="margin-top:20px;font-size:14px;">
                            AI分析评价
                        </el-row>
                        <!-- <el-row>
                            <el-form-item
                                class="el-form-item"
                                label="诊断"
                            >
                                <el-input
                                    v-model="dataInfo.slicePathologyDiagnosis"
                                    placeholder="请输入诊断"
                                    type="textarea"
                                    autosize
                                    class="input-form"
                                    size="mini"
                                    ref="inputslicePathologyDiagnosis"
                                    @click.native="getFocus('inputslicePathologyDiagnosis')"
                                >
                                </el-input>
                            </el-form-item>
                        </el-row> -->
                        <el-row>
                            <el-form-item label="AI准确">
                                <el-select placeholder="请选择AI准确" v-model="dataInfo.aiIsTrue" clearable class="picker-form"
                                    size="mini">
                                    <el-option v-for="item in aiIsTrueList" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="评价状态">
                                <el-select placeholder="请选择评价状态" v-model="dataInfo.isEvaluate" clearable class="picker-form"
                                    size="mini">
                                    <el-option v-for="item in isEvaluateList" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="评价专家">
                                <el-select placeholder="请选择评价专家" clearable v-model="dataInfo.evaluateDoctorName"
                                    class="input-form" size="mini">
                                    <el-option v-for="item in scanNameList" :key="item.scanId" :label="item.scanName"
                                        :value="item.scanId" />
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="评价日期">
                                <el-date-picker v-model="dataInfo.evaluateTime" type="datetime" size="mini"
                                    class="input-class" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择评价日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row style="text-align: center; margin-top: 15px">
                            <el-button type="primary" size="mini" @click="submitSliceInfo">提交
                            </el-button>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="切片诊断" name="sliceDiagnosis">
                        <el-row>
                            <el-form-item class="el-form-item" label="整理状态">
                                {{ dataInfo.sliceSortingStatus == 0 ? '未整理' : dataInfo.sliceSortingStatus == 1 ? '已整理' : ''
                                }}
                            </el-form-item>
                        </el-row>

                        <el-row>
                            <el-form-item class="el-form-item" label="切片类别">
                                <el-select v-model="dataInfo.sliceCategory" placeholder="请选择切片类别" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in sliceCategoryList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="冰冻">
                                <el-select v-model="dataInfo.freezeType" placeholder="请选择冰冻" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in freezeTypeList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="标本类别">
                                <el-select v-model="dataInfo.specimenType" placeholder="请选择标本类别" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in specimenCategoryList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="取材部位">
                                <el-input ref="sampleBody" v-model="dataInfo.sampleBody" placeholder="请输入取材部位"
                                    class="input-form" size="mini" @click.native="getFocus('sampleBody')">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="诊断组">
                                <el-select v-model="dataInfo.subspecialtyType" placeholder="请选择诊断组" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in subspecialtyTypeList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="病理描述">
                                <el-input v-model="dataInfo.scannerBrandModel" placeholder="请输入病理描述" type="textarea"
                                    autosize class="input-form" size="mini">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="病人诊断">
                                <el-input v-model="dataInfo.patientDiagnosis" placeholder="请输入病人诊断" type="textarea" autosize
                                    class="input-form" size="mini">
                                </el-input>
                            </el-form-item>
                        </el-row>

                        <el-row>
                            <el-form-item class="el-form-item" label="是否肿瘤">
                                <el-select v-model="dataInfo.sliceIsTumor" placeholder="请选择是否肿瘤" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in isneoplasmList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="肿瘤名称">
                                <el-input v-model="dataInfo.sliceTumorName" placeholder="请输入肿瘤名称" class="input-form"
                                    size="mini" ref="inputNeoplasmName" @click.native="getFocus('inputNeoplasmName')">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="肿瘤分类">
                                <el-select v-model="dataInfo.sliceTumorCategory" placeholder="请选择肿瘤分类" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in neoplasmkindList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="肿瘤分期">
                                <el-select v-model="dataInfo.sliceTumorStaging" placeholder="请选择肿瘤分期" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in neoplasmStagingList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="T">
                                <el-select v-model="dataInfo.sliceTumorStagingT" placeholder="请选择" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in neoplasmStagingTList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="N">
                                <el-select v-model="dataInfo.sliceTumorStagingN" placeholder="请选择" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in neoplasmStagingNList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="M">
                                <el-select v-model="dataInfo.sliceTumorStagingM" placeholder="请选择" class="picker-form"
                                    size="mini">
                                    <el-option v-for="(data, index) in neoplasmStagingMList" :key="index" :label="data.name"
                                        :value="data.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="原病理诊断">
                                <el-input v-model="dataInfo.oldPathologyDiagnosis" placeholder="请输入原病理诊断" type="textarea"
                                    autosize class="input-form" size="mini" ref="inputOldPathologyDiagnosis"
                                    @click.native="getFocus('inputOldPathologyDiagnosis')">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="该切片诊断">
                                <el-input v-model="dataInfo.slicePathologyDiagnosis" placeholder="请输入该切片诊断" type="textarea"
                                    autosize class="input-form" size="mini" ref="inputslicePathologyDiagnosis"
                                    @click.native="getFocus('inputslicePathologyDiagnosis')">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="备注2">
                                <el-input v-model="dataInfo.sliceRemark" placeholder="请输入备注2" class="input-form" size="mini"
                                    ref="inputbeizhu" @click.native="getFocus('inputbeizhu')">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="整理医生">
                                <el-input v-model="dataInfo.sliceTidyDoctorName" class="input-form" size="mini">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item class="el-form-item" label="整理日期">
                                <el-date-picker v-model="dataInfo.sliceTidyTime" type="datetime" size="mini"
                                    class="input-class" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-row>
                        <el-row style="text-align: center; margin-top: 5px">
                            <el-button type="primary" size="mini" @click="submitSliceDiagnosis"
                                v-show="!!pathologyIdStatus && currentLevelLabel != '完成'">提交
                            </el-button>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>

            </el-form>
        </VueDragResize>
    </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize';
import { isEvaluateList } from '@/client/consts/enum';
export default {
    props: ['SliceInfoData', 'currentLevelLabel'],
    name: 'SliceInfo',

    components: {
        VueDragResize,
    },

    data() {
        return {
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight - 50,
            dataInfo: {
                pathologyId: null,
                originFilename: null,
                sliceCategory: null,
                freezeType: null,
                specimenType: null,
                sampleBody: null,
                scannerSerialNumber: null,
                createTime: null,
                createName: null,
                biopsyHistoryId: null,
                scannerBrandModel: null,
                level: null,
                isAddedBiopsy: null,
                biopsyQuality: null,
                scanDefinition: null,
                sliceQualityUserId: null,
                sliceQualityTime: null, //评定日期
                patientDiagnosis: null, //诊断
                slicePathologyDiagnosis: null, //该切片诊断
                sliceRemark: null,
                subspecialtyType: null,
                sliceIsTumor: null, //该切片是否肿瘤：0：否；1：是
                sliceTumorName: null, //肿瘤名称
                sliceTumorStaging: null, //肿瘤分期
                sliceTumorCategory: null, //该切片肿瘤分类
                sliceTumorStagingT: null, //肿瘤分期T
                sliceTumorStagingN: null, //肿瘤分期N
                sliceTumorStagingM: null, //肿瘤分期M
                sliceHospital: '', //所属医院
                fileSize: '', //切片大小
                isEvaluate: '', //评价状态
                evaluateDoctorName: '', //评价人
                evaluateTime: '', //评价日期
                aiIsTrue: '',//AI准确
                oldPathologyDiagnosis: '',//原病理诊断
                branchName: '',//分院名称
            },
            pathologyIdStatus: this.$route.query.pathologyId,
            activeName: 'sliceAssess',
            scanNameList: [], // 评定员列表
            freezeTypeList: [],
            specimenCategoryList: [],
            sliceQualityList: [],
            scanQualityList: [],
            sliceCategoryList: [],
            subspecialtyTypeList: [],
            neoplasmStagingList: [],
            neoplasmkindList: [],
            neoplasmStagingTList: [],
            neoplasmStagingNList: [],
            neoplasmStagingMList: [],
            hospitalList: [],
            levelList: [
                { id: 1, name: 20 },
                { id: 2, name: 40 },
            ],
            isneoplasmList: [
                { id: 0, name: '否' },
                { id: 1, name: '是' },
            ],
            isAddedBiopsyList: [
                { id: 0, name: '自动上传' },
                { id: 1, name: '手动上传' },
            ],
            isEvaluateList: isEvaluateList,
            dictRequestMap: [
                {
                    code: 'specimenCategory',
                    arrayKey: 'specimenCategoryList',
                },
                {
                    code: 'freezeType',
                    arrayKey: 'freezeTypeList',
                },
                {
                    code: 'sliceQuality',
                    arrayKey: 'sliceQualityList',
                },
                {
                    code: 'scanningQuality',
                    arrayKey: 'scanQualityList',
                },
                {
                    code: 'sliceCategory',
                    arrayKey: 'sliceCategoryList',
                },
                {
                    code: 'neoplasmStaging',
                    arrayKey: 'neoplasmStagingList', //肿瘤分期
                },
                {
                    code: 'neoplasmkind',
                    arrayKey: 'neoplasmkindList', //肿瘤分类
                },
                {
                    code: 'neoplasmStagingT',
                    arrayKey: 'neoplasmStagingTList', //肿瘤分期T
                },
                {
                    code: 'neoplasmStagingN',
                    arrayKey: 'neoplasmStagingNList', //肿瘤分期N
                },
                {
                    code: 'neoplasmStagingM',
                    arrayKey: 'neoplasmStagingMList', //肿瘤分期M
                },
                {
                    code: 'hospitalList',
                    arrayKey: 'hospitalList',
                },
            ],
            aiIsTrueList: [{ id: "0", name: '是' }, { id: "1", name: '否' }],
            branchCourtsList: []
        };
    },
    computed: {},
    mounted() {
        if (!!this.pathologyIdStatus) {
            this.activeName = 'sliceDiagnosis';
        } else {
            this.activeName = 'sliceAssess';
        }
        this.getScanNameList();
        console.log('this.SliceInfoData', this.SliceInfoData);
        this.dataInfo = this.SliceInfoData;
        if (
            this.SliceInfoData.diagnosisDetailList &&
            this.SliceInfoData.diagnosisDetailList[0]
        ) {
            this.dataInfo.patientDiagnosis = JSON.parse(
                this.SliceInfoData.diagnosisDetailList[0].detailString
            ).input_organ_diagnose;
        }
        this.dictionariesRequest();
        this.getSubGroupsDataList();
        this.getBranchList(dataInfo.sliceHospital);

    },
    watch: {
        SliceInfoData: function (val) {
            console.log('this.SliceInfoData', val);
            this.dataInfo = val;
        },
    },
    methods: {
        getBranchList(id) {
            this.branchCourtsList = []
            let mData = this.hospitalList.filter((item) => item.id === id)[0]
            if (mData.firstCode) {
                mData.firstCode.split('、').forEach((item) => {
                    this.branchCourtsList.push({ name: item })
                })
            }
        },
        // 诊断组 列表获取
        async getSubGroupsDataList() {
            this.$axios({
                // 详见 axios 请求配置项
                method: 'GET',
                url: '/subgroups/searchSubgroupIdAndName',
            }).then(async (res) => {
                if ((await res) && (await res.data.code) === 200) {
                    this.subspecialtyTypeList = res.data.data;
                }
            });
        },
        //获取扫描员
        getScanNameList() {
            this.$axios({
                method: 'get',
                url: '/users/searchScanName ',
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.scanNameList = res.data.data;
                }
            });
        },
        submitSliceInfo() {
            this.dataInfo.biopsyId = this.dataInfo.id;
            let mData = this.dataInfo;
            this.$axios({
                method: 'POST',
                url: '/PROXY-Remote/biopsy/updateSliceQualityEvaluate/singleBiopsyInformation',
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success('提交成功');
                }
            });
        },
        submitSliceDiagnosis() {
            this.dataInfo.biopsyId = this.dataInfo.id;
            let mData = this.dataInfo;
            this.$axios({
                method: 'POST',
                url: '/PROXY-Remote/biopsy/update/sliceDiagnosis',
                data: mData,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.$message.success('提交成功');
                }
            });
        },

        //解决vue-drag-resize 文本框无法输入
        getFocus(inputDom) {
            this.$refs[inputDom].focus();
        },
        dictionariesRequest() {
            this.dictRequestMap.forEach((map) => {
                this.$axios({
                    method: 'GET',
                    url: '/PROXY-Remote/dicts/list',
                    params: {
                        code: map.code,
                        page: 0,
                        size: 99,
                    },
                }).then((res) => {
                    if (res && res.data.code === 200) {
                        this[map.arrayKey] = _.clone(res.data.data);
                    }
                });
            });
        },
        resize(newRect) {
            this.width = newRect.width;
            this.height = newRect.height;
            this.top = newRect.top;
            this.left = newRect.left;
        },
    },
};
</script>
<style scoped>
.input-class .el-input__inner {
    width: 210px !important;
}

/deep/ .el-form-item .el-form-item__label {
    line-height: 30px;
}

/deep/ .el-form-item .el-form-item__content {
    line-height: 30px;
}

/deep/ .el-input.is-disabled .el-input__inner {
    color: #2c3e50;
}
</style>
